<template>
    <div class="homeBox">
        <el-button class="custom" type="primary" size="small" @click="isCustom = true">自定义列</el-button>
        <div class="tableBox">
            <el-table border stripe :data="tableData" style="width:100%" :max-height="Height" row-key="id"
                :header-cell-style="{ textAlign: 'left', backgroundColor: '#fafafa', color: '#909399', fontSize: '12px' }">
                <el-table-column v-for="(item, index) in columns" :fixed="item.fixed" :sortable="item.sortable" :min-width="item.minWidth"
                    :key="`col_${index}`" :prop="dropCol[index].prop" :label="item.label">
                </el-table-column>
                <el-table-column fixed="right" label="操作">
                    <template slot-scope="{ row }">
                        <el-button type="primary" size="small" @click="look(row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <Pagination :total="total" :pageSize="pageSize" :pageNum="pageNum"></Pagination>
        </div>

        <el-dialog title="拖拽实现" :visible.sync="isShow" width="400px" :close-on-click-modal='false' @close="beforeClose" v-dialogDrag>
            <div>
                <ul>
                    <li v-for="(k,v,i) in detail" :key="i">{{v}}:{{k}}</li>
                </ul>
            </div>
            <div slot="footer">
                <el-button @click="isShow = false">取 消</el-button>
                <el-button type="primary" @click="isShow = false">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="自定义列" :visible.sync="isCustom" width="500px" :close-on-click-modal='false' @close="beforeClose">
            <div class="list">
                <el-checkbox v-for="(city,i) in cities" :checked='city.checked' :label="city.label" :key="i" @change="handleChange(city)">
                </el-checkbox>
            </div>
            <div slot="footer">
                <el-button @click="isCustom = false">取 消</el-button>
                <el-button type="primary" @click="isCustom = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Sortable from 'sortablejs'
import * as DATA from './data'
import { Pagination } from '@/components/table'
export default {
    components: { Pagination },
    data() {
        return {
            isCustom: false,
            tableData: [],
            Columns: [
                {
                    label: '日期',
                    prop: 'date',
                    fixed: 'left',
                    sortable: 'custom',
                    minWidth: '100',
                },
                {
                    prop: 'name',
                    minWidth: '',
                    label: '姓名',
                },
                {
                    prop: 'age',
                    minWidth: '',
                    label: '年龄',
                },
                {
                    prop: 'sex',
                    minWidth: '',
                    label: '性别',
                },
                {
                    prop: 'province',
                    minWidth: '',
                    label: '省',
                },
                {
                    prop: 'city',
                    label: '市',
                    minWidth: '',
                },
                {
                    prop: 'address',
                    label: '地址',
                    minWidth: '',
                },
                {
                    prop: 'zip',
                    label: '邮编',
                    minWidth: '',
                },
            ],
            dropCol: [],
            detail: {},
            cities: DATA.cities,
            isShow: false,
            pageNum: 1,
            pageSize: 10,
            total: 1,
            Height: undefined,
        }
    },
    computed: {
        columns() {
            return this.customFun(this.Columns)
        },
    },
    created() {
        this.dropCol = this.Columns
    },
    mounted() {
        this.Height = document.querySelector('.slider').clientHeight - 100
        window.onresize = () => {
            return (() => {
                this.Height =
                    document.querySelector('.slider').clientHeight - 100
            })()
        }
        // 阻止默认行为
        document.body.ondrop = event => {
            event.preventDefault()
            event.stopPropagation()
        }
        this.getTable()
        this.rowDrop()
        this.columnDrop()
    },
    methods: {
        // 自定义列
        customFun(columns) {
            const list = DATA.cities.filter(key => key.checked)
            list.forEach(item => {
                item.minWidth = ''
            })
            const array = [...columns, ...list]
            this.dropCol = array
            return array
        },
        handleChange(item) {
            item.checked = item.checked ? false : true
        },
        beforeClose() {
            this.isShow = false
            this.isCustom = false
            const dialog = document.querySelector('.el-dialog')
            setTimeout(() => {
                dialog.style.top = 0
                dialog.style.left = 0
            }, 200)
        },
        getTable() {
            this.tableData = [
                {
                    id: 1,
                    date: '2016-05-01',
                    name: '王小虎1',
                    age: 14,
                    sex: 1,
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄1',
                    zip: 200333,
                    t1: '北京',
                    t2: '天津',
                    t3: '上海',
                    t4: '重庆',
                    t5: '广州',
                    t6: '杭州',
                    sortable: 'custom',
                },
                {
                    id: 2,
                    date: '2016-05-02',
                    name: '王小虎2',
                    age: 14,
                    sex: 1,
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄2',
                    zip: 200333,
                    t1: '北京',
                    t2: '天津',
                    t3: '上海',
                    t4: '重庆',
                    t5: '广州',
                    t6: '杭州',
                    sortable: 'custom',
                },
                {
                    id: 3,
                    date: '2016-05-03',
                    name: '王小虎3',
                    age: 14,
                    sex: 1,
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄3',
                    zip: 200333,
                    t1: '北京',
                    t2: '天津',
                    t3: '上海',
                    t4: '重庆',
                    t5: '广州',
                    t6: '杭州',
                    sortable: 'custom',
                },
                {
                    id: 4,
                    date: '2016-05-04',
                    name: '王小虎4',
                    age: 14,
                    sex: 1,
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄4',
                    zip: 200333,
                    t1: '北京',
                    t2: '天津',
                    t3: '上海',
                    t4: '重庆',
                    t5: '广州',
                    t6: '杭州',
                    sortable: 'custom',
                },
                {
                    id: 5,
                    date: '2016-05-05',
                    name: '王小虎5',
                    age: 14,
                    sex: 1,
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄5',
                    zip: 200333,
                    t1: '北京',
                    t2: '天津',
                    t3: '上海',
                    t4: '重庆',
                    t5: '广州',
                    t6: '杭州',
                    sortable: 'custom',
                },
                {
                    id: 6,
                    date: '2016-05-06',
                    name: '王小虎6',
                    age: 14,
                    sex: 1,
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄6',
                    zip: 200333,
                    t1: '北京',
                    t2: '天津',
                    t3: '上海',
                    t4: '重庆',
                    t5: '广州',
                    t6: '杭州',
                    sortable: 'custom',
                },
                {
                    id: 7,
                    date: '2016-05-01',
                    name: '王小虎1',
                    age: 14,
                    sex: 1,
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄1',
                    zip: 200333,
                    t1: '北京',
                    t2: '天津',
                    t3: '上海',
                    t4: '重庆',
                    t5: '广州',
                    t6: '杭州',
                    sortable: 'custom',
                },
                {
                    id: 8,
                    date: '2016-05-02',
                    name: '王小虎2',
                    age: 14,
                    sex: 1,
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄2',
                    zip: 200333,
                    t1: '北京',
                    t2: '天津',
                    t3: '上海',
                    t4: '重庆',
                    t5: '广州',
                    t6: '杭州',
                    sortable: 'custom',
                },
                {
                    id: 9,
                    date: '2016-05-03',
                    name: '王小虎3',
                    age: 14,
                    sex: 1,
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄3',
                    zip: 200333,
                    t1: '北京',
                    t2: '天津',
                    t3: '上海',
                    t4: '重庆',
                    t5: '广州',
                    t6: '杭州',
                    sortable: 'custom',
                },
                {
                    id: 10,
                    date: '2016-05-04',
                    name: '王小虎4',
                    age: 14,
                    sex: 1,
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄4',
                    zip: 200333,
                    t1: '北京',
                    t2: '天津',
                    t3: '上海',
                    t4: '重庆',
                    t5: '广州',
                    t6: '杭州',
                    sortable: 'custom',
                },
                {
                    id: 11,
                    date: '2016-05-05',
                    name: '王小虎5',
                    age: 14,
                    sex: 1,
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄5',
                    zip: 200333,
                    t1: '北京',
                    t2: '天津',
                    t3: '上海',
                    t4: '重庆',
                    t5: '广州',
                    t6: '杭州',
                    sortable: 'custom',
                },
                {
                    id: 12,
                    date: '2016-05-06',
                    name: '王小虎6',
                    age: 14,
                    sex: 1,
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄6',
                    zip: 200333,
                    t1: '北京',
                    t2: '天津',
                    t3: '上海',
                    t4: '重庆',
                    t5: '广州',
                    t6: '杭州',
                    sortable: 'custom',
                },
                {
                    id: 13,
                    date: '2016-05-06',
                    name: '王小虎6',
                    age: 14,
                    sex: 1,
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄6',
                    zip: 200333,
                    t1: '北京',
                    t2: '天津',
                    t3: '上海',
                    t4: '重庆',
                    t5: '广州',
                    t6: '杭州',
                    sortable: 'custom',
                },
                {
                    id: 14,
                    date: '2016-05-06',
                    name: '王小虎6',
                    age: 14,
                    sex: 1,
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄6',
                    zip: 200333,
                    t1: '北京',
                    t2: '天津',
                    t3: '上海',
                    t4: '重庆',
                    t5: '广州',
                    t6: '杭州',
                    sortable: 'custom',
                },
                {
                    id: 15,
                    date: '2016-05-06',
                    name: '王小虎6',
                    age: 14,
                    sex: 1,
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄6',
                    zip: 200333,
                    t1: '北京',
                    t2: '天津',
                    t3: '上海',
                    t4: '重庆',
                    t5: '广州',
                    t6: '杭州',
                    sortable: 'custom',
                },
            ]
        },
        // 行拖拽
        rowDrop() {
            // 此时找到的元素是要拖拽元素的父容器
            const el = document.querySelector('.el-table__body-wrapper tbody')
            const _this = this
            Sortable.create(el, {
                ghostClass: 'sortable-ghost',
                filter: '.ignore-elements',
                animation: 150,
                onEnd({ newIndex, oldIndex }) {
                    const currRow = _this.tableData.splice(oldIndex, 1)[0]
                    _this.tableData.splice(newIndex, 0, currRow)
                },
            })
        },
        // 列拖拽
        columnDrop() {
            const el = document.querySelector('.el-table__header-wrapper tr')
            Sortable.create(el, {
                animation: 150,
                delay: 0,
                onEnd: evt => {
                    if (evt.oldIndex === evt.newIndex) return
                    const list = []
                    const oldItem = this.dropCol[evt.oldIndex]
                    this.dropCol.forEach(item => {
                        if (item.prop !== oldItem.prop) {
                            list.push(item)
                        }
                    })
                    list.splice(evt.newIndex, 0, oldItem)
                    this.dropCol = list
                },
            })
        },
        look(item) {
            this.isShow = true
            this.detail = item
        },
    },
}
</script>

<style lang="less" scoped>
.custom {
    margin: 10px;
}
.bottom {
    bottom: 0;
}
/deep/.el-dialog__body {
    padding: 10px 20px;
}
.tableBox {
    position: relative;
    background: #fff;
    border-radius: 2px;
    box-sizing: border-box;
    padding-bottom: 40px;
    /deep/.el-table th.gutter {
        display: table-cell !important;
    }
    /deep/.el-table td,
    /deep/.el-table th {
        padding: 0;
    }

    /deep/ .cell {
        font-size: 12px;
        & > span {
            color: #303133;
        }
    }
}
</style>